<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta content="IE=9" http-equiv="x-ua-compatible">
<head th:include="include :: header"></head>
<body class="gray-bg">

<div class="pull-right">
    <div class="btn-group tool-button">
        <button class="btn btn-primary navbar-btn" type="button" onclick="update()"> 保存</button>
    </div>
</div>

<div class="content-wrap">
	<form class="form-horizontal m-t" id="signupForm">
	<!--<form id="addForm" role="form" class="form-horizontal parsley-form" data-parsley-validate-->
		  <!--action="${base!}/platform/goods/type/editDo" method="post">-->
		<input type="hidden" id="id" name="id" th:value="${goodsType.id}" value="">

		<div class="wrapper" style="min-height:500px;">
			<div class="box-tab">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#base" data-toggle="tab">基本设置</a>
					<!--</li>-->
					<!--<li><a href="#props" data-toggle="tab">扩展属性</a>-->
					</li>
					<li><a href="#spec" data-toggle="tab">规格</a>
					</li>
					<li><a href="#params" data-toggle="tab">详细参数表</a>
					</li>
				</ul>
				<div class="tab-content text-center">
					<div class="tab-pane fade active in" id="base">
						<div class="col-lg-12">
							<div class="form-group">
								<label for="name" class="col-sm-2 control-label">类型名称</label>
								<div class="col-sm-8">
									<input type="text" id="name" class="form-control" name="name" data-parsley-required="true"
										  th:value="${goodsType.name}" value="" placeholder="类型名称">
								</div>
							</div>
							<!-- <div class="form-group">
								<label for="brand" class="col-sm-2 control-label">关联品牌</label>

								<div class="col-sm-8" id="brand">
									<div style="float: left;height: 35px;line-height: 35px;">
										<span th:each="bList : ${brandList}" >
											<input type="checkbox" th:value="${bList.id}" name="brand" value="">
											<span th:text="${bList.name}"></span>
										</span>
									</div>
								</div>
							</div> -->
						</div>
					</div>
					<div class="tab-pane fade" id="spec">
						<div class="form-group">
							<div class="col-sm-2">
								<button id="specAdd" type="button" class="btn btn-primary"><i class="fa fa-plus mr5"></i>选择规格</button>

							</div>
							<div class="col-sm-8">
							</div>
						</div>
						<div class="form-group">
							<label for="specTab" class="col-sm-2 control-label"></label>
							<div class="col-sm-8">
								<table id="specTab" width="100%" border="0" cellspacing="0" cellpadding="0" >
									<thead>
									<tr align="center">
										<td>规格名称</td>
										<td>规格值</td>
										<td width="2"></td>
										<td>操作</td>
									</tr>
									</thead>
									<TBODY>                  　

									<!--<tr align="center" th:each="props : ${specList}">-->
										<!--<td height="45">-->
										<!--<input type="hidden" name="specId" class="form-control" th:value="${props.specId}"><div class="specName"><span >${o.spec.name!}</span></div></td>-->
										<!--<td><input type="hidden" name="specValIds" class="form-control"-->
												   <!--value="<%for(k in o.specValList){%>${k.specValueId!},<%}%>">-->
											<!--<input-->
												<!--type="text" name="specValText"-->
												<!--value="<%for(k in o.specValList){%>${k.specValText!},<%}%>"-->
												<!--class="form-control" style="width: 200px;" readonly>-->
										<!--</td>-->

										<!--<td width="2"></td>-->
										<!--<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>-->
											<!--<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>-->
											<!--<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td>-->
									<!--</tr>-->
									</TBODY>
								</table>
							</div>
						</div>
					</div>
					<div class="tab-pane fade" id="params">
						<div class="form-group">
							<div class="col-sm-2">
								<button id="groupAdd" type="button" class="btn btn-primary"><i class="fa fa-plus mr5"></i>添加参数组</button>

							</div>
							<div class="col-sm-8">
							</div>
						</div>
						<div class="form-group">
							<label for="groupTab" class="col-sm-2 control-label"></label>
							<div class="col-sm-8">
								<table id="groupTab" width="100%" border="0" cellspacing="0" cellpadding="0" >
									<thead>
									<tr align="center">
										<td>参数组名称</td>
										<td width="2"></td>
										<td>参数管理</td>
										<td></td>
										<td>操作</td>
									</tr>
									</thead>
									<TBODY>                  　
									<!--<tr align="center" th:each="paramg : ${paramgList}" >-->
										<!--<td height="45">-->
										<!--<input type="text" name="group_name" value="${o.name!}" class="form-control" data-parsley-required="true"></td>-->
										<!--<td width="2"></td><td><button type="button" class="btn btn-default"><i class="fa fa-plus mr5"></i>管理参数</button></td>-->
										<!--<td><input type="text" name="group_params" value="<%for(k in o.params){%>${k.name!},<%}%>"  class="form-control" style="width: 80px;" readonly></td>-->
										<!--<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>-->
											<!--<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>-->
											<!--<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td>-->
									<!--</tr>-->
									</TBODY>
								</table>
							</div>
						</div>
					</div>
					<div class="tab-pane fade" id="mytab">
						<div class="form-group">
							<div class="col-sm-2">
								<button id="tabAdd" type="button" class="btn btn-default"><i class="fa fa-plus mr5"></i>添加标签</button>

							</div>
							<div class="col-sm-8">
							</div>
						</div>
						<div class="form-group">
							<label for="tabTab" class="col-sm-2 control-label"></label>
							<div class="col-sm-8">
								<table id="tabTab" width="100%" border="0" cellspacing="0" cellpadding="0" >
									<thead>
									<tr align="center">
										<td align="center" width="120">标签名称</td>
										<td align="center">编辑内容</td>
										<td align="center"></td>
										<td align="center">操作</td>
									</tr>
									</thead>
									<TBODY>                  　
									　  <%for(o in obj.tabList){%>
									<tr align="center"><td height="45">
										<input type="text" name="tab_name" value="${o.name!}" class="form-control" style="width: 150px;" data-parsley-required="true"></td>
										<td><button type="button" class="btn btn-default"><i class="fa fa-plus mr5"></i>编辑内容</button></td>
										<td><input type="hidden" name="tab_note" value="${o.note!}" class="form-control" style="width: 80px;" readonly></td>
										<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>
											<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>
											<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td></tr>
									<%}%>
									</TBODY>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>
<div id="buttom"></div>
<div id="dialogParam" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">编辑参数</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="form-group">
						<div class="col-sm-2">
							<button id="dialogParamAdd" type="button" class="btn btn-primary"><i class="fa fa-plus mr5"></i>添加参数</button>
						</div>
						<div class="col-sm-8">
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group">
						<label for="dialogParamTab" class="col-sm-2 control-label"></label>
						<div class="col-sm-8">
							<table id="dialogParamTab" width="100%" border="0" cellspacing="0" cellpadding="0" >
								<thead>
								<tr align="center">
									<td>参数名</td>
									<td width="2"></td>
									<td>操作</td>
								</tr>
								</thead>
								<TBODY>                  　
								　
								</TBODY>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
				<button id="dialogParamOK" type="button" class="btn btn-primary" data-loading-text="确定...">确 定</button>
			</div>
		</div>
	</div>
</div>


	<div th:include="include::footer"></div>
    <script language="JavaScript" th:inline="javascript">
    for( o in [[${goodsType.brandList}]] ) {
        $("input[name=brand][value="+[[${goodsType.brandList}]][o].brandid+"]").attr("checked", true);
    }
    var strSpc ='';
    for (o in [[${specList}]]){

        // console.log('1111111111');
        // console.log([[${specList}]][o]);
        var specValIds ='';
        var specValText ='';
        var specValList = [[${specList}]][o].specValList;
        // console.log('22222222');
        // console.log(specValList);
        for(p in  specValList){
            specValText +=specValList[p].specValText +',';
            specValIds += specValList[p].id + ",";
        };
        strSpc +='<tr align="center">' +
            '<td height="45">' +
            '<input type="hidden" name="specId" class="form-control" value="'+[[${specList}]][o].specId+'">' +
            '<div class="specName">'+[[${specList}]][o].spec.name+'</div></td>' +
            '<td><input type="hidden" name="specValIds" class="form-control" value="' + specValIds + '">' +
            '<input type="hidden" name="specValUrl" class="form-control" value="">' +
            '<input type="text" name="specValText" value="' + specValText + '" class="form-control" style="width: 300px;" readonly></td>' +
            '<td width="2"></td>' +
            '<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>' +
            '<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>' +
            '<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td></tr>';

    }

    $("#specTab tbody").append(strSpc);
    binSpecEvent();
    function binSpecEvent(){
        $("#specTab .up").unbind("click").on("click",function(){
            var p=$(this).parent().parent();
            var nextTR = p.prev();
            if (nextTR.length > 0) {
                nextTR.insertAfter(p);
            }
        });
        $("#specTab .down").unbind("click").on("click",function(){
            var p=$(this).parent().parent();
            var nextTR = p.next();
            if (nextTR.length > 0) {
                nextTR.insertBefore(p);
            }
        });
        $("#specTab .del").unbind("click").on("click",function(){
            var tr=$("#specTab tbody").find("tr");
            if (tr.length > 0) {
                $(this).parent().parent().remove();
            }
        });
    }

    var strParams ='';
    for (o in [[${paramgList}]]){

        console.log('1111111111');
        console.log([[${paramgList}]][o]);
        var params = [[${paramgList}]][o].params;
        // var specValIds ='';
        var paramsName ='';
        for(p in  params){
            paramsName +=params[p].name +',';
            // specValIds += params[p].id;
        };
        strParams +=
            '<tr align="center"  >'+
            '<td height="45">'+
            '<input type="text" name="group_name" value="'+[[${paramgList}]][o].name+'" class="form-control" data-parsley-required="true"></td>'+
            '<td width="2"></td><td><button type="button" class="btn btn-default"><i class="fa fa-plus mr5"></i>管理参数</button></td>'+
            '<td><input type="text" name="group_params" value="'+paramsName+'"  class="form-control" style="width: 200px;" readonly></td>'+
            '<td style="width: 80px;"><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>'+
            '<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>'+
            '<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td>'+
            '</tr>';


    }
    $("#groupTab tbody").append(strParams);
    binGroupEvent();
    function binGroupEvent(){
        $("#groupTab .up").unbind("click").on("click",function(){
            var p=$(this).parent().parent();
            var nextTR = p.prev();
            if (nextTR.length > 0) {
                nextTR.insertAfter(p);
            }
        });
        $("#groupTab .down").unbind("click").on("click",function(){
            var p=$(this).parent().parent();
            var nextTR = p.next();
            if (nextTR.length > 0) {
                nextTR.insertBefore(p);
            }
        });
        $("#groupTab .del").unbind("click").on("click",function(){
            var tr=$("#groupTab tbody").find("tr");
            if (tr.length > 0) {
                $(this).parent().parent().remove();
            }
        });
        $("#groupTab .btn").unbind("click").on("click",function(){
            $("#dialogParamTab tbody").html("");
            var btn=$(this);
            var vs=$(this).parent().parent().find("input[name='group_params']").val();
            if(vs!=""&&vs.indexOf(",")>0){
                var vss=vs.split(",");
                for(var i=0;i<vss.length-1;i++){
                    $("#dialogParamTab tbody").append('<tr align="center"><td height="45">' +
                        '<input type="text" class="form-control" value="'+vss[i]+'"></td>' +
                        '<td width="2"></td>' +
                        '<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>' +
                        '<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>' +
                        '<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td></tr>');
                }
                binDialogGroupEvent();
            }
            $("#dialogParam").modal("show");
            $("#dialogParamOK").unbind("click").on("click",function(){
                var str="";var ok=true;
                $("#dialogParamTab").find("input").each(function(){
                    if(""==$(this).val()){
                        ok=false;
                        $(this).focus();
                        return false;
                    }else{
                        str+=$(this).val()+",";
                    }
                });
                if(ok){
                    btn.parent().parent().find("input[name='group_params']").val(str);
                    $("#dialogParam").modal("hide");
                    $("#dialogParamTab tbody").html("");
                }
            });
        });
    }
</script>
	<script type="text/javascript"  src="/js/appjs/wx/goodsType/edit.js">
	</script>

</body>
</html>
